<!-- 新增和编辑弹窗 -->
<template>
  <a-modal :key="parentModal"
           :append-to-body="true"
           style="{z-index:1002}"
           :width="1000"
           :visible="visible"
           :confirm-loading="loading"
           :title="isUpdate ? '报备单详情' : '报备单详情'"
           :body-style="{ padding: '0'}"
           @update:visible="updateVisible"
           :okButtonProps="{ hidden: true }"
           :cancelButtonProps="{ hidden: true }"
  >
    <div class="ele-body ele-body-card ele-bg-base">

      <a-card :bordered="false" title='审核建议'>
        <span style="position: absolute;top: 18px;left: 100px;">
          <a-popover>
          <template #content>
          <p style="margin-top: 15px;">
            ・代理商间查重校验：全部OK   并且<br>
            &nbsp;&nbsp;&nbsp;&nbsp;代理商内查重校验： 全部OK   →  自动审核通过<br>
            ・代理商间查重校验：全部NG   或者<br>
            &nbsp;&nbsp;&nbsp;&nbsp;代理商内查重校验： 全部NG   →  自动审核驳回<br>
            ・上述以外的情况： →  转人工复核
          </p>
          </template>
          <InfoCircleTwoTone />
          </a-popover>
        </span>
        <a-form
          layout="horizontal"
          ref="form"
          :model="form"
          labelAlign="left"
          :label-col="{ md: { span: 15 }, sm: { span: 24 } }"
          :wrapper-col="{ md: { span: 9 }, sm: { span: 24 } }"
        >

          <!--          需要人工进行复合-->
          <a-row :gutter="8" style="background-color: #FEF5F4;height: 80px;"
                 v-if="form.status === 1 || (form.status === 4 && form.approveDate === '' && form.invalidSource !=='自动审核未通过')">
            <a-col :span="2">
              <img src='@/assets/autoFail0.png' class='tag-image' style="width: 60px;" alt="">
            </a-col>
            <a-col :span="22" style="margin-top: 15px;">
              <span style="font-size: large;color: red;">自动审核未通过</span>
              <br>
              <span>系统智能建议:该报备信息，</span>
              <span style="font-weight: bold;color: red;">需要人工进行复核。</span>
            </a-col>
          </a-row>

          <!--          人工复合已通过-->
          <a-row :gutter="8" style="background-color: #FEF5F4;height: 80px;"
                 v-if="((form.status === 2 || form.status === 3) && form.whyAutoFail !=='')||(form.status === 4 && form.approveDate !== '' && form.whyAutoFail !=='')">
            <a-col :span="2">
              <img src='@/assets/autoFail0.png' class='tag-image' style="width: 60px;" alt="">
            </a-col>
            <a-col :span="22" style="margin-top: 15px;">
              <span style="font-size: large;color: red;">{{ form.approveUserName }}-审核已通过</span>
              <br>
              <span>系统智能建议:该报备信息，</span>
              <span style="font-weight: bold;">人工复核已通过。</span>
            </a-col>
          </a-row>

          <!--          系统自动审核通过-->
          <a-row :gutter="8" style="background-color: #FEF5F4;height: 80px;"
                 v-if="((form.status === 2 || form.status === 3) && form.whyAutoFail ==='')||(form.status === 4 && form.approveDate !== '' && form.whyAutoFail ==='')">
            <a-col :span="2">
              <img src='@/assets/autoFail0.png' class='tag-image' style="width: 60px;" alt="">
            </a-col>
            <a-col :span="22" style="margin-top: 15px;">
              <span style="font-size: large;color: red;">自动审核通过</span>
              <br>
              <span>系统智能建议:该报备信息，</span>
              <span style="font-weight: bold;">系统自动审核通过。</span>
            </a-col>
          </a-row>

          <!--          信息全部不符合系统自动驳回-->
          <a-row :gutter="8" style="background-color: #FEF5F4;height: 80px;"
                 v-if="form.status === 4 && form.approveDate === '' && form.invalidSource ==='自动审核未通过'">
            <a-col :span="2">
              <img src='@/assets/autoFail0.png' class='tag-image' style="width: 60px;" alt="">
            </a-col>
            <a-col :span="22" style="margin-top: 15px;">
              <span style="font-size: large;color: red;">自动审核未通过</span>
              <br>
              <span>系统智能建议:该报备信息，</span>
              <span style="font-weight: bold;">信息全部不符合系统自动驳回。</span>
            </a-col>
          </a-row>

          <!--          <img v-if="form.status === 1" src='@/assets/autoFail1.png' class='tag-image' style="width: 100%" alt="">-->
          <!--          <img v-if="(form.status === 2 || form.status === 3) && form.whyAutoFail !==''" src='@/assets/autoFail2.png' class='tag-image' style="width: 100%" alt="">-->
          <!--          <img v-if="(form.status === 2 || form.status === 3) && form.whyAutoFail ===''" src='@/assets/autoFail3.png' class='tag-image' style="width: 100%" alt="">-->
          <!--          <img v-if="form.status === 4 && form.approveDate !== '' && form.whyAutoFail !==''" src='@/assets/autoFail2.png' class='tag-image' style="width: 100%" alt="">-->
          <!--          <img v-if="form.status === 4 && form.approveDate !== '' && form.whyAutoFail ===''" src='@/assets/autoFail3.png' class='tag-image' style="width: 100%" alt="">-->
          <!--          <img v-if="form.status === 4 && form.approveDate === '' && form.invalidSource !=='自动审核未通过'" src='@/assets/autoFail1.png' class='tag-image' style="width: 100%" alt="">-->
          <!--          <img v-if="form.status === 4 && form.approveDate === '' && form.invalidSource ==='自动审核未通过'" src='@/assets/autoFail4.png' class='tag-image' style="width: 100%" alt="">-->

          <!--          利用一下审批通过时间处理-->
          <div class="check-card">
            <div class="check-card-title">
              <a-popover>
                <template #content>
                  <p style="margin-top: 10px;">
                    <span style="font-size: 15px;font-weight: 500;">・查重对象</span><br>
                       &nbsp;&nbsp;&nbsp;&nbsp; ①&nbsp;&nbsp;其他代理商<br>
                       &nbsp;&nbsp;&nbsp;&nbsp; ②&nbsp;&nbsp;报备中、客户商谈中、待登记证明书号、已成交的报备<br>
                  </p>
                </template>
                <ele-tag color="blue" size="large">代理商间查重校验  <InfoCircleTwoTone /></ele-tag>
              </a-popover>
            </div>
            <div class="check-card-body">
              <div class="ele-card-item">
                <div class="ele-card-item-title ele-border-primary">报备详情确认</div>
                <div class="ele-card-item-content">

                  <a-row :gutter="8">
                    <a-col :span="8" v-if="form.customerType === 1">
                      <a-form-item label="客户名称不存在:" name="customerAddress">
                        <img v-if="!form.whyAutoFail.split(',').includes('4')" src='@/assets/fh.png'
                             class='tag-image check-image' alt="">
                        <a-popover v-if="form.whyAutoFail.split(',').includes('4')" placement="topLeft">
                          <template #content>
                            <div>
                              <div v-html="form.failCodes4"></div>
                            </div>
                          </template>
                          <img src='@/assets/bfh.png' class='tag-image check-image' alt="">
                        </a-popover>
                      </a-form-item>
                    </a-col>
                    <a-col :span="8" v-if="form.customerType === 1">
                      <a-form-item label="统一社会信用代码不存在:" name="customerName">
                        <img v-if="!form.whyAutoFail.split(',').includes('3')" src='@/assets/fh.png'
                             class='tag-image check-image' alt="">
                        <a-popover v-if="form.whyAutoFail.split(',').includes('3')" placement="topLeft">
                          <template #content>
                            <div>
                              <div v-html="form.failCodes3"></div>
                            </div>
                          </template>
                          <img src='@/assets/bfh.png' class='tag-image check-image' alt="">
                        </a-popover>
                      </a-form-item>
                    </a-col>
                    <a-col :span="8">
                      <a-form-item label="客户所在地区不存在:" name="customerAddress">
                        <img v-if="!form.whyAutoFail.split(',').includes('6')" src='@/assets/fh.png'
                             class='tag-image check-image' alt="">
                        <a-popover v-if="form.whyAutoFail.split(',').includes('6')" placement="topLeft">
                          <template #content>
                            <div>
                              <div v-html="form.failCodes6"></div>
                            </div>
                          </template>
                          <img src='@/assets/bfh.png' class='tag-image check-image' alt="">
                        </a-popover>
                      </a-form-item>
                    </a-col>
                    <a-col :span="8">
                      <a-form-item label="客户详细地址不存在:" name="customerAddressDetail">
                        <img v-if="!form.whyAutoFail.split(',').includes('9')" src='@/assets/fh.png'
                             class='tag-image check-image' alt="">
                        <a-popover v-if="form.whyAutoFail.split(',').includes('9')" placement="topLeft">
                          <template #content>
                            <div>
                              <div v-html="form.failCodes9"></div>
                            </div>
                          </template>
                          <img src='@/assets/bfh.png' class='tag-image check-image' alt="">
                        </a-popover>
                      </a-form-item>
                    </a-col>
                    <a-col :span="8">
                      <a-form-item label="客户联系人不存在" name="customerName">
                        <img v-if="!form.whyAutoFail.split(',').includes('1')" src='@/assets/fh.png'
                             class='tag-image check-image' alt="">
                        <a-popover v-if="form.whyAutoFail.split(',').includes('1')" placement="topLeft">
                          <template #content>
                            <div>
                              <div v-html="form.failCodes1"></div>
                            </div>
                          </template>
                          <img src='@/assets/bfh.png' class='tag-image check-image' alt="">
                        </a-popover>
                      </a-form-item>
                    </a-col>
                    <a-col :span="8">
                      <a-form-item label="客户联系人电话不存在" name="customerName">
                        <img v-if="!form.whyAutoFail.split(',').includes('2')" src='@/assets/fh.png'
                             class='tag-image check-image' alt="">
                        <a-popover v-if="form.whyAutoFail.split(',').includes('2')" placement="topLeft">
                          <template #content>
                            <div>
                              <div v-html="form.failCodes2"></div>
                            </div>
                          </template>
                          <img src='@/assets/bfh.png' class='tag-image check-image' alt="">
                        </a-popover>
                      </a-form-item>
                    </a-col>
                    <!--                <a-col :span="8">
                                      <a-form-item label="客户类型不存在:" name="customerAddress">
                                        <img v-if="!form.whyAutoFail.split(',').includes('5')" src='@/assets/fh.png'
                                             class='tag-image check-image' alt="">
                                        <img v-if="form.whyAutoFail.split(',').includes('5')" src='@/assets/bfh.png'
                                             class='tag-image check-image' alt="">
                                      </a-form-item>
                                    </a-col>-->
                  </a-row>
                </div>
              </div>
              <div class="ele-card-item">
                <div class="ele-card-item-title ele-border-primary">销售区域确认</div>
                <div class="ele-card-item-content">
                  <a-form-item label="企业地址是否位于当前代理商负责地区中？:" name="installAddress"
                               :labelCol="{ span: 8 }"
                  >
                    <img v-if="!form.whyAutoFail.split(',').includes('7')" src='@/assets/fh.png'
                         class='tag-image check-image'
                         alt="">
                    <img v-if="form.whyAutoFail.split(',').includes('7')" src='@/assets/bfh.png'
                         class='tag-image check-image'
                         alt="">
                  </a-form-item>
                </div>
                <div class="ele-card-item-content" style="display:flex;margin-left: 0px;margin-top: -35px;">
                  <div style="margin-left: 10px;width: 350px;">当前代理商负责地区包含:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
                  <div>{{ form.agentArea }}</div>
                </div>
              </div>
            </div>
          </div>


          <!-- 添加一个分割行-->
          <a-divider style="margin-top: 20px;margin-bottom: 20px" />

          <div class="check-card">
            <div class="check-card-title">
              <a-popover>
                <template #content>
                  <p style="margin-top: 10px;">
                    <span style="font-size: 15px;font-weight: 500;">・查重对象</span><br>
                    &nbsp;&nbsp;&nbsp;&nbsp; ①&nbsp;&nbsp;当前代理商<br>
                    &nbsp;&nbsp;&nbsp;&nbsp; ②&nbsp;&nbsp;报备中、客户商谈中、已失效(失效时间在30天内)的报备<br>
                  </p>
                </template>
                <ele-tag color="blue" size="large">代理商内查重校验  <InfoCircleTwoTone /></ele-tag>
              </a-popover>
            </div>
            <div class="check-card-body">
              <div class="ele-card-item">
                <div class="ele-card-item-title ele-border-primary">报备详情确认</div>
                <div class="ele-card-item-content">

                  <a-row :gutter="8">
                    <a-col :span="8" v-if="form.customerType === 1">
                      <a-form-item label="客户名称不存在:" name="customerAddress">
                        <img v-if="!form.whyAutoFail.split(',').includes('14')" src='@/assets/fh.png'
                             class='tag-image check-image' alt="">
                        <a-popover v-if="form.whyAutoFail.split(',').includes('14')" placement="topLeft">
                          <template #content>
                            <div>
                              <div v-html="form.failCodes14"></div>
                            </div>
                          </template>
                          <img src='@/assets/bfh.png' class='tag-image check-image' alt="">
                        </a-popover>
                      </a-form-item>
                    </a-col>
                    <a-col :span="8" v-if="form.customerType === 1">
                      <a-form-item label="统一社会信用代码不存在:" name="customerName">
                        <img v-if="!form.whyAutoFail.split(',').includes('13')" src='@/assets/fh.png'
                             class='tag-image check-image' alt="">
                        <a-popover v-if="form.whyAutoFail.split(',').includes('13')" placement="topLeft">
                          <template #content>
                            <div>
                              <div v-html="form.failCodes13"></div>
                            </div>
                          </template>
                          <img src='@/assets/bfh.png' class='tag-image check-image' alt="">
                        </a-popover>
                      </a-form-item>
                    </a-col>
                    <a-col :span="8">
                      <a-form-item label="客户所在地区不存在:" name="customerAddress">
                        <img v-if="!form.whyAutoFail.split(',').includes('16')" src='@/assets/fh.png'
                             class='tag-image check-image' alt="">
                        <a-popover v-if="form.whyAutoFail.split(',').includes('16')" placement="topLeft">
                          <template #content>
                            <div>
                              <div v-html="form.failCodes16"></div>
                            </div>
                          </template>
                          <img src='@/assets/bfh.png' class='tag-image check-image' alt="">
                        </a-popover>
                      </a-form-item>
                    </a-col>
                    <a-col :span="8">
                      <a-form-item label="客户详细地址不存在:" name="customerAddressDetail">
                        <img v-if="!form.whyAutoFail.split(',').includes('19')" src='@/assets/fh.png'
                             class='tag-image check-image' alt="">
                        <a-popover v-if="form.whyAutoFail.split(',').includes('19')" placement="topLeft">
                          <template #content>
                            <div>
                              <div v-html="form.failCodes19"></div>
                            </div>
                          </template>
                          <img src='@/assets/bfh.png' class='tag-image check-image' alt="">
                        </a-popover>
                      </a-form-item>
                    </a-col>
                    <a-col :span="8">
                      <a-form-item label="客户联系人不存在" name="customerName">
                        <img v-if="!form.whyAutoFail.split(',').includes('11')" src='@/assets/fh.png'
                             class='tag-image check-image' alt="">
                        <a-popover v-if="form.whyAutoFail.split(',').includes('11')" placement="topLeft">
                          <template #content>
                            <div>
                              <div v-html="form.failCodes11"></div>
                            </div>
                          </template>
                          <img src='@/assets/bfh.png' class='tag-image check-image' alt="">
                        </a-popover>
                      </a-form-item>
                    </a-col>
                    <a-col :span="8">
                      <a-form-item label="客户联系人电话不存在" name="customerName">
                        <img v-if="!form.whyAutoFail.split(',').includes('12')" src='@/assets/fh.png'
                             class='tag-image check-image' alt="">
                        <a-popover v-if="form.whyAutoFail.split(',').includes('12')" placement="topLeft">
                          <template #content>
                            <div>
                              <div v-html="form.failCodes12"></div>
                            </div>
                          </template>
                          <img src='@/assets/bfh.png' class='tag-image check-image' alt="">
                        </a-popover>
                      </a-form-item>
                    </a-col>
                  </a-row>
                </div>
              </div>
            </div>
          </div>
        </a-form>
      </a-card>

      <a-card :bordered="false" title='报备失效信息' v-if="form.status === 4">
        <a-form
          layout="vertical"
          ref="form"
          :model="form"
          :rules="rules"
          :label-col="{ md: { span: 22 }, sm: { span: 24 } }"
          :wrapper-col="{ md: { span: 22 }, sm: { span: 24 } }"
        >
          <a-row :gutter="8">
            <a-col :span="8">
              <a-form-item label="失效日期:" name="updateTime">
                <a-input v-model:value="form.updateTime" placeholder="" autocomplete="off"
                         disabled style="color: black;background: white" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="失效原因:" name="invalidReason">
                <a-input v-model:value="form.invalidReason" placeholder="" autocomplete="off"
                         disabled style="color: black;background: white" />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-card>

      <a-card :bordered="false" title='客户信息'>
        <a-form
          layout="vertical"
          ref="form"
          :model="form"
          :rules="rules"
          :label-col="{ md: { span: 22 }, sm: { span: 24 } }"
          :wrapper-col="{ md: { span: 22 }, sm: { span: 24 } }"
        >
          <a-row :gutter="8">
            <a-col :span="8">
              <a-form-item label="客户名称:" name="customerName">
                <a-input v-model:value="form.customerName" placeholder="" autocomplete="off" disabled
                         style="color: black;background: white" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="客户联系人:" name="customerContactsName">
                <a-input v-model:value="form.customerContactsName" placeholder="" autocomplete="off"
                         disabled style="color: black;background: white" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="联系人电话:" name="customerContactsPhone">
                <a-input v-model:value="form.customerContactsPhone" placeholder="" autocomplete="off"
                         disabled style="color: black;background: white" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="客户类型:" name="customerTypeName">
                <a-input v-model:value="form.customerTypeName" placeholder="" autocomplete="off" disabled
                         style="color: black;background: white" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="统一社会信用代码:" name="customerUscc" v-if="form.customerType === 1">
                <a-input v-model:value="form.customerUscc" placeholder="" autocomplete="off" disabled
                         style="color: black;background: white" />
              </a-form-item>
            </a-col>
            <a-col :span="17">
              <a-form-item label="所在地区:" name="customerAddress">
                <a-input v-model:value="form.customerAddress" placeholder="" autocomplete="off" disabled
                         style="color: black;background: white" />
              </a-form-item>
            </a-col>
            <a-col :span="17">
              <a-form-item label="详细地址:" name="customerAddressDetail">
                <a-input v-model:value="form.customerAddressDetail" placeholder="" autocomplete="off" disabled
                         style="color: black;background: white" />
              </a-form-item>
            </a-col>
            <a-col :span="17">
              <a-form-item label="安装地址:" name="installAddress">
                <a-input v-model:value="form.installAddress" placeholder="" autocomplete="off" disabled
                         style="color: black;background: white" />
              </a-form-item>
            </a-col>

          </a-row>
        </a-form>
      </a-card>

      <a-card :bordered="false" title='代理商信息'>

        <a-form
          layout="vertical"
          ref="form"
          :model="form"
          :rules="rules"
          :label-col="{ md: { span: 22 }, sm: { span: 24 } }"
          :wrapper-col="{ md: { span: 22 }, sm: { span: 24 } }"
        >
          <a-row :gutter="8">
            <a-col :span="8">
              <a-form-item label="代理商名称:" name="agentName">
                <a-input v-model:value="form.agentName" placeholder="" autocomplete="off"
                         disabled style="color: black;background: white" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="报备人姓名:" name="createUserName">
                <a-input v-model:value="form.createUserName" placeholder="" autocomplete="off"
                         disabled style="color: black;background: white" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="报备人电话:" name="createUserPhone">
                <a-input v-model:value="form.createUserPhone" placeholder="" autocomplete="off"
                         disabled style="color: black;background: white" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="联系人姓名:" name="agentContactName">
                <a-input v-model:value="form.agentContactName" placeholder="" autocomplete="off"
                         disabled style="color: black;background: white" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="联系人电话:" name="agentContactPhone"
              >
                <a-input v-model:value="form.agentContactPhone" placeholder="" autocomplete="off"
                         disabled style="color: black;background: white" />
              </a-form-item>
            </a-col>
            <a-col :span="17">
              <a-form-item label="代理商地址:" name="agentAddress">
                <a-input v-model:value="form.agentAddress" placeholder="" autocomplete="off"
                         disabled style="color: black;background: white" />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-card>

      <a-card :bordered="false" title='报备延期审核'
              v-if="form.status !== 1 && form.delayApplyTime !== null && form.delayApplyTime !== ''">
        <a-form
          layout="vertical"
          ref="form"
          :model="form"
          :rules="rules"
          :label-col="{ md: { span: 22 }, sm: { span: 24 } }"
          :wrapper-col="{ md: { span: 22 }, sm: { span: 24 } }"
        >
          <a-row :gutter="8">
            <a-col :span="8">
              <a-form-item label="审核类型:" name="">
                <a-input value="申请延期" placeholder="" autocomplete="off"
                         disabled style="color: black;background: white" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="申请延期至:" name="delayDate">
                <a-input v-model:value="form.delayDate" placeholder="" autocomplete="off" disabled
                         style="color: black;background: white" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="申请原因:" name="delayReason">
                <a-input v-model:value="form.delayReason" placeholder="" autocomplete="off" disabled
                         style="color: black;background: white" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="申请人姓名:" name="delayCreateUserName">
                <a-input v-model:value="form.delayCreateUserName" placeholder="" autocomplete="off"
                         disabled style="color: black;background: white" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="申请人电话:" name="delayCreateUserPhone">
                <a-input v-model:value="form.delayCreateUserPhone" placeholder="" autocomplete="off"
                         disabled style="color: black;background: white" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="申请时间:" name="delayApplyTime">
                <a-input v-model:value="form.delayApplyTime" placeholder="" autocomplete="off" disabled
                         style="color: black;background: white" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="审核操作人员姓名:" name="delayPassUserName">
                <a-input v-model:value="form.delayPassUserName" placeholder="" autocomplete="off"
                         disabled style="color: black;background: white" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="审核通过时间:" name="delayPassTime">
                <a-input v-model:value="form.delayPassTime" placeholder="" autocomplete="off" disabled
                         style="color: black;background: white" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="审核结果:" name="delayPassTime">
                <a-input v-if="form.conferStatus === 1" value="商谈中" placeholder="" autocomplete="off" disabled
                         style="color: black;background: white" />
                <a-input v-if="form.conferStatus === 2" value="延期申请待审核" placeholder="" autocomplete="off"
                         disabled style="color: black;background: white" />
                <a-input v-if="form.conferStatus === 3" value="已延期" placeholder="" autocomplete="off" disabled
                         style="color: black;background: white" />
                <a-input v-if="form.conferStatus === 4" value="延期申请已驳回" placeholder="" autocomplete="off"
                         disabled style="color: black;background: white" />
              </a-form-item>
            </a-col>

            <a-col :span="24">
              <a-form-item label="申请附件:" name="delayReason">
                <!--                <div class="grid-container">-->
                <!--                  <div v-for="file in form.delayFiles" :key="file.fileId" class="grid-item">-->
                <!--                    &lt;!&ndash; 判断是否为图片文件（这里以检查文件扩展名为例） &ndash;&gt;-->
                <!--                    <template v-if="isImageFile(file)">-->
                <!--                      &lt;!&ndash; 对于图片文件，使用<img>标签显示 &ndash;&gt;-->
                <!--&lt;!&ndash;                      <a :href="handlePrevie(file.fileUrl)" target="_blank">&ndash;&gt;-->
                <!--                        <a-image :src="file.fileUrl" alt="图片预览"-->
                <!--                             style="max-width: 80px; max-height: 80px; object-fit: cover;">-->
                <!--                        </a-image>-->
                <!--&lt;!&ndash;                      </a>&ndash;&gt;-->
                <!--                    </template>-->
                <!--                    <template v-else>-->
                <!--                      <a :href="file.fileUrl" target="_blank">-->
                <!--                        <FileTwoTone style="width: 80px;height: 80px;font-size: 35px; margin: 15px;" />-->
                <!--                      </a>-->
                <!--                    </template>-->
                <!--&lt;!&ndash;-->
                <!--                    <span class="file-name">{{ file.fileName }}</span>-->
                <!--&ndash;&gt;-->
                <!--                  </div>-->
                <!--                </div>-->
                <a-upload
                  action="/toapi/admin/file/upload"
                  list-type="picture-card"
                  :disabled="true"
                  v-model:file-list="fileList"
                >
                </a-upload>
                <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                  <img alt="example" style="width: 100%" :src="previewImage" />
                </a-modal>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-card>
      <a-card :bordered="false" title='成交产品'>
        <a-form
          layout="vertical"
          ref="form"
          :model="form"
          :rules="rules"
          :label-col="{ md: { span: 22 }, sm: { span: 24 } }"
          :wrapper-col="{ md: { span: 22 }, sm: { span: 24 } }"
        >
          <a-row :gutter="8">
            <a-col :span="8">
              <a-form-item label="报备日期:" name="createTime">
                <a-input v-model:value="form.createTime" placeholder="" autocomplete="off"
                         disabled style="color: black;background: white" />
              </a-form-item>
            </a-col>

            <a-col :span="8">
              <a-form-item label="审批通过日期:" name="transactionDate">
                <a-input v-model:value="form.approveDate" placeholder="" autocomplete="off"
                         disabled style="color: black;background: white" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="成交日期:" name="transactionDate">
                <a-input v-model:value="form.transactionDate" placeholder="" autocomplete="off"
                         disabled style="color: black;background: white" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="报备单号:" name="code">
                <a-input v-model:value="form.code" placeholder="" autocomplete="off"
                         disabled style="color: black;background: white" />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-card>
      <a-card :bordered="false" title='产品明细'>
        <a-form
          layout="vertical"
          ref="form"
          :model="form"
          :rules="rules"
          :label-col="{ md: { span: 22 }, sm: { span: 24 } }"
          :wrapper-col="{ md: { span: 22 }, sm: { span: 24 } }"
        >
          <a-table
            ref="table"
            row-key="id"
            :data-source="form.products"
            :columns="computedColumns"
            :scroll="{ x: 'max-content' }"
            :pagination="false"
            bordered
          >

            <!-- table操作栏按钮 -->
            <template #action="{ record }">
              <a-space style="float: left" v-if="form.status === 3 && form.certificateStatus === 1">
                {{ record.certificateCode }}
                <a @click="showSmModal(record)"
                   v-if="record.certificateStatus === 1 && user.roleId !== '2'"
                >
                  <EditOutlined />
                </a>
                <!--                <a-divider type="vertical" />-->
              </a-space>
            </template>

            <!--安装证明书号标题特殊样式-->
            <template #customActionTitle="{}">
              <div style="display: flex; flex-direction: column; align-items: start;width: 300px;">
                <div>安装证明书号</div>
                <div style="color: red; font-size: smaller;text-align: left;">请确认安装证明书号无误</div>
              </div>
            </template>
          </a-table>
        </a-form>
      </a-card>

      <a-card :bordered="false" title='流程信息'>
        <!--<a-steps progress-dot
               direction="vertical"
               :current="1">
        <a-step title="第一步" description="这是第一步的描述                123                123"></a-step>
        <a-step title="第二步" description="这是第二步的描述"></a-step>
        <a-step title="第三步" description="这是第三步的描述"></a-step>
      </a-steps>-->
        <a-steps :current="100"
                 direction="vertical">
          <a-step v-for="step in stepData" :key="step.id">
            <template #icon>
              <span v-if="step.style === 1"
                    style="display:inline-block;width:8px;height:8px;border-radius:50%;background-color:mediumpurple;"></span>
              <span v-if="step.style === 2"
                    style="display:inline-block;width:8px;height:8px;border-radius:50%;background-color:red;"></span>
              <span v-if="step.style === 3"
                    style="display:inline-block;width:8px;height:8px;border-radius:50%;background-color:black;"></span>
              <span v-if="step.style === 4"
                    style="display:inline-block;width:8px;height:8px;border-radius:50%;background-color:lightgreen;"></span>
            </template>
            <template #title>
              <div v-if="step.style === 2" style="font-weight: bold;color: red !important;">{{ step.node }}</div>
              <div v-if="step.style !== 2" style="font-weight: bold">{{ step.node }}</div>

            </template>
            <template #description>
              <div v-if="step.style === 2" style="color: red !important;">
                {{ step.description }}<br>
                {{ step.createTime }}
              </div>
              <div v-if="step.style !== 2">
                {{ step.description }}<br>
                {{ step.createTime }}
              </div>
            </template>
          </a-step>

          <!--         <a-step>
                      <template #icon>
                        <span style="display:inline-block;width:8px;height:8px;border-radius:50%;background-color:mediumpurple;"></span>
                      </template>
                      <template #title>
                        <div style="font-weight: bold">自定1534义标题</div>
                      </template>
                      <template #description>
                        <div class="custom-description">这里是自定义描述内容，您可以上方悬浮查看。</div>
                      </template>
                    </a-step>
                    <a-step>
                      <template #icon>
                        <span style="display:inline-block;width:8px;height:8px;border-radius:50%;background-color:red;"></span>
                      </template>
                      <template #title>
                        <div style="font-weight: bold">自定1534义标题</div>
                      </template>
                      <template #description>
                        <div class="custom-description">这里是自定义描述内容，您可以上方悬浮查看。</div>
                      </template>
                    </a-step>
                    <a-step>
                      <template #icon>
                        <span style="display:inline-block;width:8px;height:8px;border-radius:50%;background-color:black;"></span>
                      </template>
                      <template #title>
                        <div style="font-weight: bold">自定1534义标题</div>
                      </template>
                      <template #description>
                        <div class="custom-description">这里是自定义描述内容，您可以上方悬浮查看。</div>
                      </template>
                    </a-step>
                    <a-step>
                      <template #icon>
                        <span style="display:inline-block;width:8px;height:8px;border-radius:50%;background-color:lightgreen;"></span>
                      </template>
                      <template #title>
                        <div style="font-weight: bold">自定1534义标题</div>
                      </template>
                      <template #description>
                        <div class="custom-description">这里是自定义描述内容，您可以上方悬浮查看。</div>
                      </template>
                    </a-step>-->
        </a-steps>
      </a-card>
      <!--      <a-card :bordered="false" v-if="form.status ===3 && form.certificateStatus === 1">
        <img src='@/assets/confirm.png' class='tag-image' style="width: 100%" alt="">
      </a-card>-->
    </div>

    <!-- 自定义底部插槽，移除默认按钮 -->
    <template #footer v-if="user.roleId !== '2'">
      <div
        style="text-align: center;position: fixed; bottom:5px;margin-left: -16px;  background-color: #ffffff; width: 1000px;height: 50px;">
        <span v-if="form.status === 1" style="margin-right: 20px">人工复核</span>
        <!--      报备中 或者 客户商谈中 延期待审批展示-->
        <a-radio-group v-if="form.status === 1 ||(form.status===2 && form.conferStatus === 2)"
                       v-model:value="approveBean.action" name="action" default-value="1">
          <a-radio value="1">通过</a-radio>
          <a-radio value="2">驳回</a-radio>
        </a-radio-group>
        <a-input v-if="form.status === 1 ||(form.status===2 && form.conferStatus === 2)"
                 v-model:value="approveBean.reason" name="reason" placeholder="请输入驳回原因20字之内" allow-clear
                 autocomplete="off" size="large" style="width: 40%;" maxlength="20" />
        <a-button v-if="form.status === 1 ||(form.status===2 && form.conferStatus === 2)"
                  type="primary" @click="approve()" style="margin-left: 20px">提交
        </a-button>

        <!--      只有在待确认证明书号状态才展示的按钮-->
        <a-button v-if="form.status === 3  && form.certificateStatus === 1"
                  type="primary" @click="showConfirmCodeModal" style="margin-left: 30px">确认证明书号
        </a-button>

        <!--      任何状态都展示的按钮-->
        <a-button :type="'dashed'" @click="updateVisible(false)" style="margin-left: 20px">取消</a-button>
        <!--      除了已失效之外展示终止-->
        <a-button v-if="form.status !== 4" type="primary" danger @click="showStopModal()">终止</a-button>
        <!--      已失效展示复合通过-->
        <a-button v-if="form.status === 4 && user.roleId === '1'" type="primary" @click="showResetModal()">复核通过</a-button>
      </div>
    </template>
  </a-modal>


  <!-- 补全证明书号的弹窗-->
  <a-modal :key="Math.random()"
           :append-to-body="true"
           style="{z-index:1002}"
           title="补全证明书号"
           :visible="smVisible"
           @ok="smHandleOk"
           @cancel="smHandleCancel"
  >
    <a-input style="width: 220px; background-color: #ffffff !important;" v-model:value="smCurrentRecord.certificateCode"
             disabled />
    <a-input style="width: 100px;" v-model:value="smInputText" placeholder="证明书号" maxlength="6" />
  </a-modal>


  <!-- 终止原因的弹窗-->
  <a-modal :key="Math.random()"
           :append-to-body="true"
           style="{z-index:1002}"
           title="终止报备单"
           :visible="stopVisible"
           @ok="stopHandleOk"
           @cancel="stopHandleCancel"
           :wrap-props="{ style: { display: 'flex', flexDirection: 'column', alignItems: 'center' } }"
  >
    <div style="text-align: center">
      <div style="margin-bottom: 16px; text-align: center;">
        <a-image
          :src="require('@/assets/warn.png')"
          preview-fail-msg=""
          style="max-width: 100%; height: auto;"
        />
      </div>
      <a-space style="width: 100%; justify-content: center;">
        确定终止么？
      </a-space>
      <a-input
        style="width: 400px; margin: 20px 0; text-align: center;line-height: 30px"
        v-model:value="stopReason"
        maxlength="50"
        placeholder="请输入终止原因"
      />
    </div>

  </a-modal>

  <!-- 复合原因的弹窗-->
  <a-modal :key="Math.random()"
           :append-to-body="true"
           style="{z-index:1002}"
           title="复核报备单"
           :visible="resetVisible"
           @ok="resetHandleOk"
           @cancel="resetHandleCancel"
           :wrap-props="{ style: { display: 'flex', flexDirection: 'column', alignItems: 'center' } }"
  >
    <div style="text-align: center">
      <div style="margin-bottom: 16px; text-align: center;">
        <a-image
          :src="require('@/assets/warn.png')"
          preview-fail-msg=""
          style="max-width: 100%; height: auto;"
        />
      </div>
      <a-space style="width: 100%; justify-content: center;">
        确定复核通过么？
      </a-space>
      <a-input
        style="width: 400px; margin: 20px 0; text-align: center;line-height: 30px"
        v-model:value="resetReason"
        maxlength="50"
        placeholder="请输入复核说明"
      />
    </div>

  </a-modal>

  <!-- 确认证明书号的弹窗-->
  <a-modal :key="Math.random()"
           :append-to-body="true"
           style="{z-index:1002}"
           title="确认证明书号"
           :visible="confirmCodeVisible"
           @ok="confirmCodeHandleOk"
           @cancel="confirmCodeHandleCancel"
           :wrap-props="{ style: { display: 'flex', flexDirection: 'column', alignItems: 'center' } }"
  >
    <div style="margin-bottom: 16px; text-align: center;">
      <a-image
        :src="require('@/assets/warn.png')"
        preview-fail-msg=""
        style="max-width: 100%; height: auto;"
      />
    </div>
    <a-space style="width: 100%; justify-content: center;">
      请确认当前安装证明书号无误！
    </a-space>
  </a-modal>
</template>

<script>
import { ReportApi } from '@/api/ReportApi';
import { DashboardApi } from '@/api/DashboardApi';
import { Steps } from 'ant-design-vue';


export default {
  name: 'ReportEdit',
  emits: ['done', 'update:visible'],
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object
  },
  components: {
    'a-steps': Steps
    /*, 'a-step': Step*/
  },
  setup() {
  },
  data() {
    return {
      description: 'descriptiona a a ',
      // 是否可以预览
      previewVisible: false,
      // 预览图片的地址
      previewImage: '',
      // 用户信息
      user: {},
      // 表单数据
      form: {
        whyAutoFail: '1,2,3,4,5,6,7,8,9'
      },
      // 步骤条数据
      stepData: [],
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,
      columns: [
        { title: '产品名称', dataIndex: 'name', sorter: false },
        { title: '产品数量', dataIndex: 'number', sorter: false }
      ],
      approveBean: {
        action: '1',
        reason: ''
      },// 审批相关
      smVisible: false, // 控制弹窗显示隐藏
      smCurrentRecord: {}, // 当前行数据
      smInputText: '', // 用户输入的文字

      stopVisible: false, // 控制终止弹窗显示隐藏
      stopReason: '', // 终止原因

      resetVisible: false, // 控制复合弹窗显示隐藏
      resetReason: '', // 复合通过原因

      fileList: [],

      confirmCodeVisible: false // 控制确认证明书号弹窗显示隐藏

    };
  },
  computed: {
    computedColumns() {
      // 复制一份 columns，以便于根据条件调整
      const columns = [...this.columns];
      // 根据条件决定是否添加总计列
      if (this.form.status === 3 && this.form.certificateStatus === 1) {
        columns.push(
          { /*title: '请确认安装证明书号无误',*/
            key: 'action',
            width: 300,
            align: 'center',
            slots: {
              title: 'customActionTitle',
              customRender: 'action'
            }
          }
        );
      }
      // 根据条件决定是否添加总计列
      if (this.form.status === 3 && this.form.certificateStatus === 2) {
        columns.push(
          { /*title: '请确认安装证明书号无误',*/
            dataIndex: 'certificateCode',
            sorter: false,
            width: 300,
            slots: {
              title: 'customActionTitle'
            }
          }
        );
      }

      columns.push(
        {
          title: '总计(件数)',
          dataIndex: 'totalCount',
          align: 'center',
          customRender: ({ text, index }) => {
            const obj = {
              children: text,
              props: {}
            };
            if (index === 0) {
              obj.props.rowSpan = 100;
            } else {
              obj.props.colSpan = 0;
            }
            return obj;
          }
        }
      );
      return columns;
    }
  },
  mounted() {
    this.getUser();
  },

  watch: {
    data() {
      if (this.data) {
        this.reloadForm();
      }
    }
  },
  methods: {
    /**
     * 点击预览图片时
     */
    handlePreview(url) {
      // 打开预览框
      this.previewVisible = true;
      this.previewImage = url;
    },
    /**
     * 点击取消按钮
     */
    handleCancel() {
      this.previewVisible = false;
    },
    // 获取用户信息
    async getUser() {
      const res = await DashboardApi.getUser();
      this.user = res.data;
    },
    // 审批方法
    async approve() {
      const id = this.form.id;
      const actionValue = this.approveBean.action;
      const reason = this.approveBean.reason;
      ReportApi.approve({
        id: id,
        action: actionValue,
        reason: reason
      }).then(result => {
        // 移除加载框
        this.loading = false;
        // 提示添加成功
        this.$message.success(result.message);
        // 关闭弹框，通过控制visible的值，传递给父组件
        this.updateVisible(false);
        // 触发父组件done事件
        this.$emit('done');
      });
    },

    // 登记证明书号相关方法
    showSmModal(record) {
      this.smCurrentRecord = record;
      this.smVisible = true;
    },
    smHandleOk() {
      // 校验this.smInputText是大写字母和数字
      if (!/^[A-Z0-9]+$/.test(this.smInputText)) {
        this.$message.error('只能输入大写字母和数字');
        return;
      }

      // 提交逻辑，包含输入的文字和当前行的ID
      ReportApi.fixCerCode({
        id: this.smCurrentRecord.id,
        cerCode: this.smInputText
      }).then(result => {
        // 移除加载框
        this.loading = false;
        // 提示添加成功
        this.$message.success(result.message);
        this.reloadForm();
        this.$emit('done');
        this.smVisible = false;
        this.smInputText = ''; // 清空输入框
      }).catch(error => {
        this.$message.error('补全证明书号失败:' + error);
      });
    },
    smHandleCancel() {
      this.smVisible = false;
      this.smInputText = ''; // 关闭弹窗时清空输入框
    },

    // 终止相关方法
    showStopModal() {
      this.stopVisible = true;
    },

    // 终止相关方法
    showResetModal() {
      this.resetVisible = true;
    },

    stopHandleCancel() {
      this.stopVisible = false;
      this.stopReason = ''; // 关闭弹窗时清空输入框
    },
    stopHandleOk() {
      const id = this.form.id;
      const reason = this.stopReason;
      ReportApi.approve({
        id: id,
        action: 3,
        reason: reason
      }).then(result => {
        // 移除加载框
        this.loading = false;
        // 提示添加成功
        this.$message.success(result.message);
        // 关闭弹框，通过控制visible的值，传递给父组件
        this.stopVisible = false;
        this.stopReason = ''; // 关闭弹窗时清空输入框
        this.updateVisible(false);
        // 触发父组件done事件
        this.$emit('done');
      });
    },

    resetHandleCancel() {
      this.resetVisible = false;
      this.resetReason = ''; // 关闭弹窗时清空输入框
    },

    resetHandleOk() {
      const id = this.form.id;
      const reason = this.resetReason;
      ReportApi.approve({
        id: id,
        action: 4,
        reason: reason
      }).then(result => {
        // 移除加载框
        this.loading = false;
        // 提示添加成功
        this.$message.success(result.message);
        // 关闭弹框，通过控制visible的值，传递给父组件
        this.resetVisible = false;
        this.resetReason = ''; // 关闭弹窗时清空输入框
        this.updateVisible(false);
        // 触发父组件done事件
        this.$emit('done');
      });
    },

    // 确认证明书号相关方法
    showConfirmCodeModal() {
      this.confirmCodeVisible = true;
    },
    confirmCodeHandleCancel() {
      this.confirmCodeVisible = false;
    },
    confirmCodeHandleOk() {
      const id = this.form.id;
      ReportApi.confirmCode({
        id: id
      }).then(result => {
        // 移除加载框
        this.loading = false;
        // 提示添加成功
        this.$message.success(result.message);
        // 关闭弹框，通过控制visible的值，传递给父组件
        this.confirmCodeVisible = false;
        this.updateVisible(false);
        // 触发父组件done事件
        this.$emit('done');
      });
    },

    // 刷新表格
    async reloadForm() {
      // 获取报备单详情数据
      await ReportApi.detail({ id: this.data.id }).then(result => {
        this.form = result.data;
        // 重置组件信息
        this.approveBean.action = '1';
        this.approveBean.reason = '';
        if (this.form.delayFiles) {
          this.fileList = this.form.delayFiles.map(d => {
            return {
              uid: d.id,      // 文件唯一标识，建议设置为负数，防止和内部产生的 id 冲突
              name: d.fileName,   // 文件名
              status: 'done', // 状态有：uploading done error removed，被 beforeUpload 拦截的文件没有 status 属性
              response: '{"status": "success",}', // 服务端响应内容
              url: d.fileUrl
            };
          });
        }
      }).catch(error => {
        console.error('获取详情失败:', error);
      });

      // 获取报备单流程数据
      await ReportApi.getFlow({ id: this.data.id }).then(result => {
        this.stepData = result.data;
      }).catch(error => {
        console.error('获取流程信息失败:', error);
      });
    },
    /**
     * 更新编辑界面的弹框是否显示
     * @param value true-显示，false-隐藏
     */
    updateVisible(value) {
      this.$emit('update:visible', value);
    },

    isImageFile(file) {
      const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg'];
      const extension = file.fileName.split('.').pop().toLowerCase();
      return imageExtensions.includes(extension);
    }
  }
};
</script>

<style scoped>
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); /* 自动填充列，每列最小80px宽，最大占满可用空间 */
  gap: 10px; /* 间隔 */
  align-items: center; /* 垂直居中对齐 */
}

.grid-item {
  display: flex;
  flex-direction: column;
  /*align-items: center;
  justify-content: center;*/
  text-align: center;
  height: 100px; /* 每个item的高度 */
}

.file-name {
  white-space: normal;
  overflow-wrap: break-word;
  margin-top: 1px; /* 文件名与图标之间的距离 */
}

.ant-form-item {
  margin: 12px;
}

.tag-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.check-image {
  width: 70px;
  object-fit: cover;
}

.ele-card-item-title {
  border-left: 4px solid;
  padding: 0 10px;
  margin: 15px 0;
}

.ele-card-item-content {
  padding: 15px 10px;
  background-color: #f4f4f5;
}

.red-dot-icon::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: red;
  margin-right: 8px; /* 根据需要调整间距 */
}

.check-card {
  background-color: #f3fbff;
  padding: 15px;
  margin-top: 15px;
}
</style>
